import Taro from '@tarojs/taro';
import { useEffect, useState } from 'react'
import { View } from '@tarojs/components';
import './index.scss'

const CustomHeader = () => {
  // 设置状态，默认状态栏高度20，Header高度64
  const [statusBarHeight, setStatusBarHeight] = useState(20);
  const [headerHeight, setHeaderHeight] = useState(64); // 包括状态栏和导航栏高度

  useEffect(() => {
    // 在组件挂载时获取系统信息
    const systemInfo = Taro.getSystemInfoSync();
    const statusBarHeight = systemInfo.statusBarHeight;
    const headerHeight = statusBarHeight + 40; // 假设导航栏固定高度为44px
    setStatusBarHeight(statusBarHeight);
    setHeaderHeight(headerHeight);
  }, []); // 空数组表示这个effect只在组件挂载时执行一次

  return (
    <View className="CustomHeader" style={{
      paddingTop: `${statusBarHeight}px`,
      height: `${headerHeight}px`,
    }}>
      <View className="Custom_container"></View>
    </View>
  );
};

export default CustomHeader;
